<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查询资产 | 资产公证平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#4080FF',
            neutral: '#F5F7FA',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .btn-hover {
        transition: all 0.3s ease;
      }
      .btn-hover:hover {
        transform: translateY(-2px);
      }
    }
    
    /* 修复Bootstrap导航栏样式 */
    .navbar-nav .nav-link {
      @apply px-4 py-2 text-gray-700 hover:text-primary transition-colors;
    }
    
    .navbar-nav .nav-link.active {
      @apply font-medium text-primary;
    }
    
    .navbar-toggler {
      @apply border-0 focus:ring-0;
    }
  </style>
</head>
<body class="font-inter bg-neutral text-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
    <div class="container">
      <a class="navbar-brand text-primary font-bold text-xl" href="index.html">
        <i class="fa-solid fa-shield-check mr-2"></i>资产公证平台
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="create.html">创建资产</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="query.html">查询资产</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="transfer.html">转移资产</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow">
    <!-- 页面标题区 -->
    <section class="bg-primary text-white py-12">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1 class="text-3xl font-bold mb-2">查询资产</h1>
            <p class="text-white/80">通过资产ID查询已公证的资产信息</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 查询资产表单 -->
    <section class="py-16 bg-neutral">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="bg-white rounded-xl p-8 card-shadow">
              <div class="mb-8">
                <h2 class="text-2xl font-bold mb-4">资产查询</h2>
                <p class="text-gray-600">请输入要查询的资产ID，系统将从区块链中检索相关信息</p>
              </div>
              
              <form id="queryForm">
                <div class="mb-6">
                  <label for="assetId" class="form-label font-medium">资产ID</label>
                  <input type="text" class="form-control rounded-lg border-gray-300" id="assetId" placeholder="请输入资产ID" required>
                </div>
                
                <div class="d-flex justify-content-center">
                  <button type="submit" class="btn btn-primary px-8 py-3 rounded-lg font-medium btn-hover w-full max-w-xs">
                    <i class="fa-solid fa-search mr-2"></i>查询资产
                  </button>
                </div>
              </form>
              
              <!-- 加载状态 -->
              <div id="loading" class="mt-8 text-center hidden">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                <p class="mt-2 text-gray-600">正在查询资产信息，请稍候...</p>
              </div>
              
              <!-- 查询结果区域 -->
              <div id="resultArea" class="mt-8 hidden">
                <div class="bg-neutral rounded-xl p-6">
                  <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa-solid fa-info-circle text-primary mr-2"></i>
                    资产详情
                  </h3>
                  
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                      <p class="text-gray-500 text-sm">资产ID</p>
                      <p id="resultId" class="font-medium"></p>
                    </div>
                    <div>
                      <p class="text-gray-500 text-sm">资产所有者</p>
                      <p id="resultOwner" class="font-medium"></p>
                    </div>
                    <div>
                      <p class="text-gray-500 text-sm">资产名称</p>
                      <p id="resultName" class="font-medium"></p>
                    </div>
                    <div>
                      <p class="text-gray-500 text-sm">创建时间</p>
                      <p id="resultTime" class="font-medium"></p>
                    </div>
                  </div>
                  
                  <div class="mb-6">
                    <p class="text-gray-500 text-sm">资产信息</p>
                    <div id="resultInfo" class="bg-white p-4 rounded-lg border border-gray-200 min-h-[100px]"></div>
                  </div>
                  
                  <div class="flex justify-between items-center">
                    <div class="text-xs text-gray-500">
                      <i class="fa-solid fa-chain text-primary mr-1"></i>
                      <span id="resultBlockchain">区块高度: --</span>
                    </div>
                    <button id="newQueryBtn" class="btn btn-outline-primary px-4 py-2 rounded-lg text-sm">
                      <i class="fa-solid fa-plus mr-1"></i>新查询
                    </button>
                  </div>
                </div>
              </div>
              
              <!-- 查询错误区域 -->
              <div id="errorArea" class="mt-8 hidden">
                <div class="bg-red-50 rounded-xl p-6 border border-red-100">
                  <div class="flex items-start">
                    <div class="flex-shrink-0 pt-0.5">
                      <i class="fa-solid fa-exclamation-circle text-red-500 text-xl"></i>
                    </div>
                    <div class="ml-3">
                      <h3 class="text-red-800 font-medium">查询失败</h3>
                      <div class="mt-2 text-sm text-red-700">
                        <p id="errorMessage">未能找到指定ID的资产信息，请检查输入是否正确。</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 mb-8">
          <h3 class="text-xl font-bold mb-4">资产公证平台</h3>
          <p class="text-gray-400 mb-6">利用区块链技术，为您的资产提供安全、透明的公证服务</p>
          <div class="d-flex gap-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-facebook"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-twitter"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-linkedin"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-instagram"></i>
            </a>
          </div>
        </div>
        
        <div class="col-lg-2 col-md-6 mb-8">
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="list-unstyled text-gray-400">
            <li class="mb-2"><a href="index.html" class="hover:text-white transition-colors">首页</a></li>
            <li class="mb-2"><a href="create.html" class="hover:text-white transition-colors">创建资产</a></li>
            <li class="mb-2"><a href="query.html" class="hover:text-white transition-colors">查询资产</a></li>
            <li class="mb-2"><a href="transfer.html" class="hover:text-white transition-colors">转移资产</a></li>
          </ul>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-8">
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="list-unstyled text-gray-400">
            <li class="mb-2"><i class="fa-solid fa-map-marker-alt mr-2"></i>北京市海淀区中关村大街</li>
            <li class="mb-2"><i class="fa-solid fa-phone mr-2"></i>400-123-4567</li>
            <li class="mb-2"><i class="fa-solid fa-envelope mr-2"></i>contact@assetnotary.com</li>
          </ul>
        </div>
        
        <div class="col-lg-3 mb-8">
          <h4 class="text-lg font-semibold mb-4">订阅更新</h4>
          <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新的资产公证资讯</p>
          <form class="d-flex">
            <input type="email" class="form-control rounded-l-lg border-gray-700 bg-gray-800 text-white" placeholder="您的邮箱">
            <button type="submit" class="btn btn-primary rounded-r-lg">
              <i class="fa-solid fa-arrow-right"></i>
            </button>
          </form>
        </div>
      </div>
      
      <div class="border-t border-gray-800 pt-8 mt-8 text-center text-gray-500">
        <p>&copy; 2025 资产公证平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const queryForm = document.getElementById('queryForm');
      const loading = document.getElementById('loading');
      const resultArea = document.getElementById('resultArea');
      const errorArea = document.getElementById('errorArea');
      const newQueryBtn = document.getElementById('newQueryBtn');
      
      // 处理表单提交
      queryForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取输入的资产ID
        const assetId = document.getElementById('assetId').value.trim();
        
        // 显示加载状态，隐藏结果和错误区域
        loading.classList.remove('hidden');
        resultArea.classList.add('hidden');
        errorArea.classList.add('hidden');
        
        // 禁用表单防止重复提交
        const submitBtn = e.submitter;
        submitBtn.disabled = true;
        
        // 发送AJAX请求
        fetch(`http://192.168.163.128:9000/hls/query?id=${encodeURIComponent(assetId)}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          }
        })
        .then(response => {
          // 隐藏加载状态
          loading.classList.add('hidden');
          
          // 重新启用表单
          submitBtn.disabled = false;
          
          if (!response.ok) {
            throw new Error('资产查询失败');
          }
          return response.json();
        })
        .then(data => {
          console.log(data);
          
          // 成功获取数据
          if (data) {
            // 填充结果区域
            document.getElementById('resultId').textContent = data.id;
            document.getElementById('resultOwner').textContent = data.owner;
            document.getElementById('resultName').textContent = data.name;
            document.getElementById('resultInfo').textContent = data.info;
            
            // 生成一个模拟的创建时间
            const createTime = new Date();
            createTime.setSeconds(createTime.getSeconds() - Math.floor(Math.random() * 3600 * 24 * 30));
            document.getElementById('resultTime').textContent = createTime.toLocaleString();
            
            // 生成一个模拟的区块高度
            document.getElementById('resultBlockchain').textContent = `区块高度: ${Math.floor(Math.random() * 1000000) + 100000}`;
            
            // 显示结果区域
            resultArea.classList.remove('hidden');
          } else {
            // 没有找到资产
            showError('未能找到指定ID的资产信息，请检查输入是否正确。');
          }
        })
        .catch(error => {
          // 处理错误
          console.error('查询错误:', error);
          showError('服务器连接失败，请稍后再试。');
        });
      });
      
      // 新查询按钮点击事件
      newQueryBtn.addEventListener('click', function() {
        resultArea.classList.add('hidden');
        queryForm.reset();
        document.getElementById('assetId').focus();
      });
      
      // 显示错误信息
      function showError(message) {
        document.getElementById('errorMessage').textContent = message;
        errorArea.classList.remove('hidden');
      }
    });
  </script>
</body>
</html>



